<!doctype html>
<meta charset="utf-8">
<title>IDL-constructed CSSMathValue serialization tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#calc-serialization">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';

const gTestCases = [
  {
    description: 'CSSMathMax with one argument',
    value: new CSSMathMax(1),
    cssText: 'max(1)',
  },
  {
    description: 'CSSMathMax with more than one argument',
    value: new CSSMathMax(1, 2, 3),
    cssText: 'max(1, 2, 3)',
  },
  {
    description: 'CSSMathMax with pixel arguments',
    value: new CSSMathMin(CSS.px(100), CSS.px(110)),
    cssText: 'min(100px, 110px)',
  },
  {
    description: 'CSSMathMax containing nested CSSMathValues',
    value: new CSSMathMax(new CSSMathSum(1, 2), 3),
    cssText: 'max(1 + 2, 3)',
  },
  {
    description: 'CSSMathMin with one argument',
    value: new CSSMathMin(1),
    cssText: 'min(1)',
  },
  {
    description: 'CSSMathMin with more than one argument',
    value: new CSSMathMin(1, 2, 3),
    cssText: 'min(1, 2, 3)',
  },
  {
    description: 'CSSMathMin with pixel arguments',
    value: new CSSMathMin(CSS.px(90), CSS.px(100)),
    cssText: 'min(90px, 100px)',
  },
  {
    description: 'CSSMathMin containing nested CSSMathValues',
    value: new CSSMathMin(new CSSMathSum(1, 2), 3),
    cssText: 'min(1 + 2, 3)',
  },
  {
    description: 'CSSMathClamp with lower, value and upper arguments',
    value: new CSSMathClamp(1, 2, 3),
    cssText: 'clamp(1, 2, 3)',
  },
  {
    description: 'CSSMathClamp with pixel arguments',
    value: new CSSMathClamp(CSS.px(90), CSS.px(100), CSS.px(110)),
    cssText: 'clamp(90px, 100px, 110px)',
  },
  {
    description: 'CSSMathClamp containing nested CSSMathValues',
    value: new CSSMathClamp(new CSSMathSum(1, 2), 3, 4),
    cssText: 'clamp(1 + 2, 3, 4)',
  },
  {
    description: 'CSSMathSum with one argument',
    value: new CSSMathSum(1),
    cssText: 'calc(1)',
  },
  {
    description: 'CSSMathSum with more than one argument',
    value: new CSSMathSum(1, 2, 3),
    cssText: 'calc(1 + 2 + 3)',
  },
  {
    description: 'CSSMathSum with a CSSMathNegate as first value',
    value: new CSSMathSum(new CSSMathNegate(1), 2, 3),
    cssText: 'calc((-1) + 2 + 3)',
  },
  {
    description: 'CSSMathSum containing a CSSMathNegate after first value',
    value: new CSSMathSum(1, new CSSMathNegate(2), 3),
    cssText: 'calc(1 - 2 + 3)',
  },
  {
    description: 'CSSMathSum nested inside a CSSMathValue',
    value: new CSSMathSum(new CSSMathSum(1, 2), 3),
    cssText: 'calc((1 + 2) + 3)',
  },
  {
    description: 'CSSMathNegate',
    value: new CSSMathNegate(1),
    cssText: 'calc(-1)',
  },
  {
    description: 'CSSMathNegate nested inside a CSSMathValue',
    value: new CSSMathProduct(new CSSMathNegate(1)),
    cssText: 'calc((-1))',
  },
  {
    description: 'CSSMathProduct with one argument',
    value: new CSSMathProduct(1),
    cssText: 'calc(1)',
  },
  {
    description: 'CSSMathProduct with more than one argument',
    value: new CSSMathProduct(1, 2, 3),
    cssText: 'calc(1 * 2 * 3)',
  },
  {
    description: 'CSSMathProduct with a CSSMathInvert as first value',
    value: new CSSMathProduct(new CSSMathInvert(1), 2, 3),
    cssText: 'calc((1 / 1) * 2 * 3)',
  },
  {
    description: 'CSSMathProduct containing a CSSMathInvert after first value',
    value: new CSSMathProduct(1, new CSSMathInvert(2), 3),
    cssText: 'calc(1 / 2 * 3)',
  },
  {
    description: 'CSSMathProduct nested inside a CSSMathValue',
    value: new CSSMathProduct(new CSSMathProduct(1, 2), 3),
    cssText: 'calc((1 * 2) * 3)',
  },
  {
    description: 'CSSMathInvert',
    value: new CSSMathInvert(1),
    cssText: 'calc(1 / 1)',
  },
  {
    description: 'CSSMathInvert nested inside a CSSMathValue',
    value: new CSSMathSum(new CSSMathInvert(1)),
    cssText: 'calc((1 / 1))',
  },
];

for (const {value, cssText, description} of gTestCases) {
  test(() => {
    assert_equals(value.toString(), cssText);
  }, description + ' serializes correctly');
}

</script>
